<template>
    <div class="materialContent">
        <div class="materialContentComponent">
            <div class="input-content">
                <InputContent
                    ref="inputContentRef"
                    :disabled="props.disabled"
                    :maxlength="props.maxLength"
                    :input-disabled="props.inputDisabled"
                    :single-list="props.singleList"
                    :re-key="props.reKey"
                    :tabs="props.inputContentTabs"
                    :btns="props.inputContentBtns"
                    :content="props.inputContentData"
                    :placeholder="props.placeholder" />
            </div>
            <div class="material-content">
                <MaterialComponent
                    ref="materialComponentRef"
                    :disabled="props.disabled"
                    :max-num="props.maxNum"
                    :is-hidden-label="props.isHiddenLabel"
                    :single-list="props.singleList"
                    :re-key="props.reKey"
                    :tabs="props.showMaterialTabs"
                    :material-data="props.materialContentData" />
            </div>
        </div>
        <div class="extra-operation">
            <div v-for="item in operationList" :key="item.id" class="btn" @click="operation(item.id)">
                {{ item.label }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted, computed } from 'vue';
import InputContent from './components/InputContent.vue';
import MaterialComponent from './components/MaterialComponent.vue';
import bus from '@/utils/bus';

const inputContentRef = ref<HTMLElement | null>();
const materialComponentRef = ref<HTMLElement | null>();
const extraOperationList = reactive([
    {
        id: 1,
        label: '选择已有欢迎语'
    },
    {
        id: 2,
        label: '复用已有欢迎语'
    },
    {
        id: 3,
        label: '恢复默认'
    }
]);

interface StateType {
    content: string;
    welcomeFriendId: string;
    material: Array<{ [propsName: string]: string | number }>;
    restIds: Array<number>;
    newMaterials: Array<{ [propsName: string]: string | number }>;
}

const state = reactive<StateType>({
    content: '',
    welcomeFriendId: '',
    material: () => [],
    restIds: () => [],
    newMaterials: () => []
});

interface Props {
    modelValue: string;
    disabled: boolean;
    maxLength: number;
    inputDisabled: boolean;
    singleList: Array<number>;
    reKey: string;
    maxNum: number;
    isHiddenLabel: boolean;
    placeholder: string;
    inputContentTabs: Array<number>;
    inputContentBtns: Array<number>;
    showMaterialTabs: Array<string>;
    operationList: Array<number>;
    inputContentData: string;
    materialContentData: Array<any>;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    disabled: false,
    maxLength: 1000,
    inputDisabled: false,
    singleList: () => [],
    reKey: '',
    maxNum: 9,
    isHiddenLabel: false,
    placeholder: '请输入消息',
    inputContentTabs: () => [1, 2],
    inputContentBtns: () => [],
    showMaterialTabs: () => ['1', '2', '3', '4', '5', '6'],
    operationList: () => [],
    inputContentData: '',
    materialContentData: () => []
});

const emit = defineEmits(['update:modelValue', 'change', 'changPro', 'changeMaterials', 'changeTextIdList']);

const operationList = computed(() => {
    return extraOperationList.filter(item => props.operationList.includes(item.id));
});

const updateMaterials = (val: any) => {
    const { selectMaterials: material, restIds, newMaterials, reKey, welcomeFriendId } = val;
    let content = '';
    if (reKey === props.reKey) {
        state.material = material;
        state.restIds = restIds;
        state.newMaterials = newMaterials;
        state.welcomeFriendId = welcomeFriendId;
        if (val.content) {
            state.content = val.content;
            content = val.content;
        } else {
            content = state.content;
        }
        const res = formatMaterialParams3(state);
        emit('changeMaterials', { material });
        emit('changPro', { content, material });
        emit('change', res);
    }
};

const updateContent = (val: any) => {
    const { content, reKey, text_ids } = val;
    if (reKey === props.reKey) {
        state.content = content;
        const res = formatMaterialParams3(state);
        const { material } = state;
        emit('changPro', { content, material });
        emit('changeTextIdList', text_ids);
        emit('change', res);
    }
};

const formatMaterialParams3 = (state: any) => {
    const { content: welcome_text, material, welcomeFriendId: welcome_friend_id } = state;
    let welcome_info = {};
    const welcome_material: any[] = [];
    const welcome_local_upload: any[] = [];
    const welcome_local_link: any[] = [];
    if (material.length) {
        material.forEach((item: any) => {
            const {
                type,
                id: media_content_id,
                local: local = false,
                code: code = '',
                link_title,
                link_url,
                link_decs,
                link_share_image,
                name,
                icon,
                is_default_del: is_default_del = 2
            } = item;
            if (local) {
                switch (Number(type)) {
                    case 3:
                        welcome_local_link.push({ link_title, link_url, link_decs, link_share_image });
                        break;
                    default:
                        welcome_local_upload.push({ type, code });
                        break;
                }
            } else if (is_default_del === 1) {
                switch (Number(type)) {
                    case 3:
                        welcome_local_link.push({ link_title, link_url, link_decs, link_share_image, is_default_del });
                        break;
                    case 11:
                        welcome_local_link.push({ name, icon, is_default_del });
                        break;
                }
            } else {
                welcome_material.push({ type, media_content_id });
            }
        });
    }
    welcome_info = {
        welcome_text,
        welcome_material,
        welcome_local_upload,
        welcome_local_link,
        welcome_friend_id
    };
    return { welcome_info };
};

const clearInput = () => {
    inputContentRef.value.clearInput();
};
const clearMaterial = () => {
    materialComponentRef.value.clearMaterial();
};
const operation = (id: number) => {
    switch (id) {
        case 1:
            selectAlreadyMaterial();
            break;
        case 2:
            selectGroupAlreadyMaterial();
            break;
    }
};
const selectAlreadyMaterial = () => {
    materialComponentRef.value.selectAlreadyMaterialShow = true;
};
const selectGroupAlreadyMaterial = () => {
    materialComponentRef.value.selectGroupAlreadyMaterialShow = true;
};

onMounted(() => {
    bus.on('selectMaterials', updateMaterials);
    bus.on('changeContent', updateContent);
});

onUnmounted(() => {
    bus.off('selectMaterials', updateMaterials);
    bus.off('changeContent', updateContent);
});

defineExpose({
    clearInput,
    clearMaterial
});
</script>

<style lang="scss" scoped>
.materialContent {
    display: flex;

    .materialContentComponent {
        min-width: 200px;
        max-width: 600px;
        flex: 1;
        box-sizing: border-box;

        .input-content {
        }

        .material-content {
        }
    }

    .extra-operation {
        margin: 0 10px;
        display: flex;
        flex-direction: column;

        .btn {
            font-size: 12px;
            color: #ff6b00;
            line-height: 2;
            margin-bottom: 8px;

            &:hover {
                cursor: pointer;
                color: #f99a38;
            }
        }
    }
}
</style>
